<script setup>
import { reactive, ref, onMounted } from 'vue'
import { InfoFilled, UserFilled, Lock } from '@element-plus/icons-vue'
import { captchaApi } from'@/apis/system/login.js'
import { useTokenStore } from'@/stores'
import { useRouter } from 'vue-router';


// 等待标识
const loading = ref(false)

// 提交数据
const formLogin = reactive({
  username: '',
  password: '',
  captchaText: '',
  captchaKey:'',
})

// 验证码base64形式
const base64Img = ref('');

// 获取验证码标识和地址
const captcha = async()=>{
    const res = await captchaApi();
    base64Img.value = res.data.base64Img;
    formLogin.captchaKey = res.data.captchaKey;
}

// 刷新验证码
const changeImg = ()=>{
    captcha();
}

// 校验规则
const rules = reactive({
    username:[
        {required: true,message:'用户名不能为空',trigger:'blur'},
    ],
    password:[
        {required: true,message:'密码不能为空',trigger:'blur'},
    ],
    captchaText:[
        {required: true,message:'验证码不能为空',trigger:'blur'},
    ],
    
})

// 获得路由对象进行路由跳转
const router = useRouter();
const tokenStore = useTokenStore();
const ruleFormRef = ref();
const login = async() =>{
   // 获取token请求
   try {
        await ruleFormRef.value.validate();
        loading.value = true;
        await tokenStore.saveToken(formLogin);
        loading.value = false;
        router.push({ name: "Index" });
    } catch (error) {
        tokenStore.clearToken();
    }
}

onMounted(()=> captcha())
</script>

<template>
    <div class='continer'>
       <div class="content">
            <h2>乐宠坊后台管理系统</h2>
            <div class="form">
                <el-form
                    :model="formLogin"
                    :rules="rules"
                    ref="ruleFormRef"
                >
                    <el-form-item prop="username">
                        <el-input v-model="formLogin.username" class="form_input" :prefix-icon="UserFilled" placeholder="用户名" @keyup.enter="login"/>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="formLogin.password" type="password" class="form_input" :prefix-icon="Lock" placeholder="密码" @keyup.enter="login"/>
                    </el-form-item>
                    <el-form-item prop="captchaText">
                        <el-input v-model="formLogin.captchaText"  :prefix-icon="InfoFilled" class="form_input" placeholder="验证码" style="width: 67%;" @keyup.enter="login"/>
                        <span style="width: 30%;height: 39px;margin-left: 3%; cursor: pointer;" @click="changeImg"><img :src="base64Img" alt="验证码" style="width: 100%;height: 100%;"></span>
                    </el-form-item>
                </el-form>
            </div>
            <div class="button_content">
                <el-button type="primary" class="button_css" @click="login" @keyup.enter="login" :disabled="loading"> 
                    <el-icon class="is-loading" v-if="loading"><Loading /></el-icon>{{loading?'登录中...':'登录'}}
                </el-button>
            </div>
       </div>
    </div>

</template>

<style scoped lang='scss'>
.continer{
    display: flex;
    height: 100vh;
    width: 100vw;
    background: url("@/images/bg.svg") no-repeat;
    justify-content: center;
    align-items: center;
    background-size: cover;

    .content{
        position: relative;
        height: 340px;
        width: 420px;
        background-color: rgba(245, 245, 245, 0.747);
        margin-bottom: 80px;
        border-radius: 30px;
        background: #ffffff93;
        box-shadow:  5px 5px 42px #d6d6d6, -5px -5px 42px #f0efef;

        h2{
            width: 100%;
            text-align: center;
            position: absolute;
            font-size: 28px;
            top: 20px;
        }

        .form{
            width: 80%;
            position: absolute;
            font-size: 28px;
            top: 60px;
            left: 10%;
            padding-top: 20px;

            .form_input {
                width: 100%;
                height: 40px;
                background-color: transparent;
            }
        }

        
    }

    .button_content{
        position: absolute;
        width: 100%;
        bottom: 30px;
        text-align: center;

        .button_css{
            width: 80%;
            height: 36px;
        }
    }

}


</style>